<template>
	<view class="container-white">
		<view class="head flex-box" v-if="topic.quesType > 0">
			<view style="padding: 10upx 0;">
				<text v-if="topic.quesType == 1">单选题</text>
				<text v-if="topic.quesType == 2">多选题</text>
				<text v-if="topic.quesType == 3">判断题</text>
			</view>
			<view>（{{index}}/{{total}}）</view>
		</view>

		<view class="topic-box">
			<rich-text v-if="topic.quesInfo != '该试题已删除'" :nodes="topic.quesInfo" class="questions"></rich-text>
			<view class="topic-box-delete" v-else>
				{{topic.quesInfo}}
			</view>
			<view v-if="topic.info">{{topic.info}}</view>
			<view class="answer">
				<view class="options" v-for="(item,index) in topic.optionsBeans" :key="index">
					<view v-if="topic.quesType == 3" class="stide" :class="item.checked?(item.status?'correct':'mistake'):(item.status?'correct':'')">
						<image :src="item.checked?(item.status?'/static/icon/correct.png':'/static/icon/error.png'):(item.status?'/static/icon/correct.png':'')"
						 style="width: 60upx;height: 60upx;" />
					</view>
					<view v-else class="stide" :class="item.checked?(item.status?'correct':'mistake'):(item.status?'correct':'')">
						<view v-if="!item.checked">{{item.key}}</view>
						<image v-else :src="item.status?'/static/icon/correct.png':'/static/icon/error.png'" style="width: 60upx;height: 60upx;" />
					</view>
					<view style="flex:1">{{item.option}}</view>
				</view>
			</view>
			<view style="margin-top: 20upx;" v-show="answRight != null">
				<view style="font-size:28upx;color: #999999;">矿校云提醒您</view>
				<view v-if="topic.quesType == 3" class="flex-box">
					<view style="flex: 1;">
						正确答案：
						<text style="color: #02A8F4;">{{answRight === 'A' ? '正确':'错误'}}</text>
					</view>
					<view style="flex: 1;">
						您的答案：
						<text style="color: #02A8F4;">{{useransw === 'A' ? '正确':useransw === 'B'?'错误':'未选择'}}</text>
					</view>
				</view>
				<view v-else class="flex-box">
					<view style="flex: 1;">
						正确答案：
						<text style="color: #02A8F4;">{{answRight}}</text>
					</view>
					<view style="flex: 1;">
						您的答案：
						<text style="color: #02A8F4;">{{useransw||'未选择'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		post_md5
	} from '../../common/request'

	export default {
		data() {
			return {
				topic: {},
				answ: [],
				answRight: '',
				useransw: '',
				total: 0,
				index: 0
			}
		},
		onLoad(options) {
			console.log(options)
			this.getTopic(options)
			this.total = options.total
			this.index = Number(options.index) + 1
		},
		methods: {
			getTopic(options) {
				const params = {
					userId: uni.getStorageSync('userId'),
					quesId: options.quesId,
					examId: options.examId
				}
				post_md5('/train-app/courseexam/analysis', params).then(res => {
					console.log(res)
					if (res.data == null) {
						this.topic = {
							quesType: 0,
							quesInfo: '该试题已删除',
							optionsBeans: []
						}
						this.answRight = null
					} else {
						this.topic = {
							quesType: res.data.quesType,
							quesInfo: res.data.quesInfo,
							optionsBeans: res.data.quesOptions
						}
						this.answRight = res.data.answRight
						this.useransw = res.data.answ.split(',').join('') || ''
						// 删除空选项
						for (let i in this.topic.optionsBeans) {
							if (this.topic.optionsBeans[i].option == '') {
								this.topic.optionsBeans.splice(i, 1)
							}
						}
						this.topic.optionsBeans.forEach(x => {
							this.answRight.split('').forEach(y => {
								if (x.key === y) {
									x.status = true
								}
							})
						})
					}
				})
			}
		}
	}
</script>

<style>
	.head {
		padding: 0 20upx;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #ededed;
	}

	.menu {
		display: flex;
		font-size: 22upx;
		font-weight: 400;
		color: #333333;
		padding: 10upx 100upx;
		margin: 1px 0;
		border-bottom: 1px solid #ededed;
		text-align: center;
	}

	.menu-icon {
		width: 42upx;
		height: 42upx;
	}

	.topic-box {
		padding: 20upx;
		font-size: 28upx;
		font-weight: normal;
		color: #333333;
		line-height: 60upx;
	}

	.mistake {
		background: #ec6663;
		border: 1px solid #ec6663;
		color: #ffffff;
	}

	.correct {
		background: #3ed325;
		color: #ffffff;
		border: 1px #3ed325 solid;
	}
</style>
<style scoped>
	.topic-box-delete {
		line-height: 300upx;
		text-align: center;
		color: #DEE2ED;
		font-size: 18px;
	}
</style>
